import React, { Component } from 'react'
import { Redirect } from 'react-router-dom'
import { connect } from 'react-redux'
import PropTypes from 'prop-types'
import {
  NavBar,
  WhiteSpace,
  InputItem,
  TextareaItem,
  Button,
  Toast
} from 'antd-mobile'

import HeaderSelector from '../../components/header-selector/header-selector'
import { updateUserInfo } from '../../redux/actions';


export class DashenInfo extends Component {

  state = {
    header: '',
    post: '',
    info: ''
  }

  static propTypes = {
    user: PropTypes.object.isRequired,
    updateUserInfo: PropTypes.func.isRequired
  }

  // 选择头像
  setHeader = (header)=>{
    this.setState({ header })
  }
  // 输入信息
  handleChange = (key,value)=>{
    this.setState({ [key]: value })
  }
  // 保存
  save = ()=>{
    const { header, post, info } = this.state
    if (!header) {
      Toast.fail('请选择头像！',1)
    } else if (!post) {
      Toast.fail('请输入求职岗位！',1)
    } else if (!info) {
      Toast.fail('请输入个人介绍！',1)
    } else {
      this.props.updateUserInfo(this.state)
    }
  }

  render() {
    // 完善信息后跳转到对应用户类型主页
    const { header, post, info, type } = this.props.user
    const path = '/' + type 
    if (header && post && info) {
      return <Redirect to={path} />
    }

    return (
      <div>
        <NavBar>大神信息完善</NavBar>
        <HeaderSelector setHeader={this.setHeader} />
        <WhiteSpace />
        <InputItem placeholder="请输入求职岗位" onChange={value => {this.handleChange('post',value)}}>求职岗位:</InputItem>
        <WhiteSpace />
        <TextareaItem title="个人介绍:" rows={3} placeholder="请输入个人介绍" onChange={value => {this.handleChange('info',value)}} />
        <WhiteSpace />
        <Button type="primary" onClick={this.save}>保&nbsp;&nbsp;存</Button>
      </div>
    )
  }
}

export default connect(
  state => ({ user: state.user }),
  { updateUserInfo }
)(DashenInfo) 
